<script setup>
import { ref, watch } from 'vue'
import { pcaTextArr } from 'element-china-area-data'
import { bus } from '@/utils/common/mitt'
import { getClassApi, getCollegeApi, majorListQueryApi } from '@/api/baseData'
import { useUserStore } from '@/stores/user'
const formRef = ref(null)
const userStore = useUserStore()
const props = defineProps({
  // 表单数据
  data: {
    type: Object,
    default: {}
  },
  formOpt: {
    type: Array,
    default: []
  },
  btnOpt: {
    type: Array,
    default: []
  }
})
const formData = ref(Object.assign({}, props.data))

const emits = defineEmits(['handleForm'])

const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号'
    }
  ],
  account: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  class: [
    {
      required: true,
      message: '请输入班级',
      trigger: 'blur'
    }
  ],
  college: [
    {
      required: true,
      message: '请输入学院'
    }
  ],
  major: [
    {
      required: true,
      message: '请输入专业'
    }
  ],
  resume: [
    {
      required: true,
      message: '请上传简历'
    }
  ],
  enterpriseName: [
    {
      required: true,
      message: '请输入企业名称',
      trigger: 'blur'
    }
  ],
  jobName: [
    {
      required: true,
      message: '请输入岗位名称',
      trigger: 'blur'
    }
  ]
}
function handleForm(type) {
  if (type == 'cancel') {
    reset()
    emits('handleForm', type)
  } else {
    formRef.value.validate((valid) => {
      if (valid) {
        emits('handleForm', type, formData.value)
        reset()
      } else {
        return false
      }
    })
  }
}
function handleClick() {
  emits('handleForm', 'downloadMaterial', formData.value)
}
// uploadRef
const uploadRefs = ref(null)
function reset() {
  formRef.value.resetFields()
  uploadRefs.value[0].clearFiles()
}
// 对外提供方法
defineExpose({
  reset
})
// 获取学院列表
const collegeList = ref([])
async function getCollegeListData() {
  const res = await getCollegeApi()

  collegeList.value = res.data.map((item) => {
    return {
      label: item.college,
      value: item.college
    }
  })
  collegeList.value.unshift({ label: '全部', value: '*' })
  console.log(classList.value)
}
getCollegeListData()

// 专业选择器
const majorList = ref([])
async function getMajorListData(data) {
  if (data == '*') {
    formData.value.major = '*'
    // 当选择"全部"学院时，专业列表只显示"全部"选项
    majorList.value = [{ label: '全部', value: '*' }]
    formData.value.class = '*'
    classList.value = [{ label: '全部', value: '*' }]
    return
  }
  const res = await majorListQueryApi({ college: data })
  majorList.value = res.data.map((item) => {
    return {
      label: item.major,
      value: item.major
    }
  })
  majorList.value.unshift({ label: '全部', value: '*' })
}
// 专业发生变化
const classList = ref([])
async function handleMajorChange(data) {
  const res = await getClassApi({
    college: formData.value.college,
    major: formData.value.major
  })
  classList.value = res.data?.map((item) => {
    return {
      label: item.class,
      value: item.class
    }
  })
  classList.value.unshift({ label: '全部', value: '*' })
}
bus.on('delete', () => {
  getCollegeListData()
})
function handleUploadSuccess(e) {
  formData.value.resume = e.url
}
function handleUploadSuccesss(e) {
  formData.value.material = e.url
}
function handleUploadSuccessstudentMaterial(e) {
  formData.value.studentMaterial = e.url
}
function handleUploadSuccesMaterialUpload(e) {
  formData.value.material = e.url
}
</script>

<template>
  <div class="form-wrapper">
    <el-form
      :model="formData"
      :inline="true"
      ref="formRef"
      label-width="auto"
      label-position="left"
      label-suffix="："
      :rules="rules"
    >
      <el-form-item
        v-for="(item, index) in props.formOpt"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <!-- 身份和普通文本框 -->
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'input'"
          :disabled="item.prop == 'identity' || item.disabled == true"
        ></el-input>
        <!-- 文本域 -->
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'textarea'"
          :autosize="{ minRows: 2, maxRows: 6 }"
          type="textarea"
          style="width: 195px"
        ></el-input>
        <!-- 密码 -->
        <el-input
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'password'"
          show-password
          type="password"
          style="width: 195px"
        ></el-input>
        <!-- 选择器下拉框 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'select'"
          placeholder="请选择"
          style="width: 195px"
        >
          <el-option
            v-for="obj in item.options"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 学院选择器 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'selectCollege'"
          placeholder="请选择学院"
          style="width: 195px"
          @change="getMajorListData"
        >
          <el-option
            v-for="obj in collegeList"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 专业选择器 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'selectMajor'"
          placeholder="请选择专业"
          style="width: 195px"
          @change="handleMajorChange"
        >
          <el-option
            v-for="obj in majorList"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 班级选择器 -->
        <el-select
          v-model.trim="formData[item.prop]"
          v-if="item.type == 'selectClass'"
          placeholder="请选择专业"
          style="width: 195px"
          :multiple="item.attribute == 'multiple'"
        >
          <el-option
            v-for="obj in classList"
            :key="obj.value"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
        <!-- 地址选择器 -->
        <el-cascader
          v-if="item.type == 'address'"
          style="width: 195px"
          :options="pcaTextArr"
          v-model="formData[item.prop]"
        >
        </el-cascader>
        <el-upload
          v-if="item.type == 'uploadResume'"
          ref="uploadRefs"
          class="avatar-uploader"
          action="http://127.0.0.1:3007/info/uploadResume"
          :show-file-list="true"
          :on-success="handleUploadSuccess"
          :headers="{ authorization: userStore.token }"
        >
          <el-icon
            class="avatar-uploader-icon"
            style="color: black; width: 100px; height: 100px; border: 2px solid #ccc"
          >
            <Plus />
          </el-icon>
        </el-upload>
        <el-upload
          v-if="item.type == 'uploadMaterial'"
          ref="uploadRefs"
          class="avatar-uploader"
          action="http://127.0.0.1:3007/info/uploadInternshipMaterial"
          :show-file-list="true"
          :on-success="handleUploadSuccesss"
          :headers="{ authorization: userStore.token }"
        >
          <el-icon
            class="avatar-uploader-icon"
            style="color: black; width: 100px; height: 100px; border: 2px solid #ccc"
          >
            <Plus />
          </el-icon>
        </el-upload>
        <!-- 上传就业信息附件 -->
        <div class="upload-material">
          <el-upload
            v-if="item.type == 'materialUpload'"
            ref="uploadRefs"
            class="avatar-uploader"
            action="http://127.0.0.1:3007/info/uploadNineYe"
            :show-file-list="true"
            :on-success="handleUploadSuccesMaterialUpload"
            :headers="{ authorization: userStore.token }"
          >
            <el-icon
              class="avatar-uploader-icon"
              style="color: black; width: 100px; height: 100px; border: 2px solid #ccc"
            >
              <Plus />
            </el-icon>
          </el-upload>
          <el-button
            v-if="item.type == 'materialUpload' && formData.material != ''"
            type="success"
            @click="handleClick(scope)"
            plain
            >下载附件</el-button
          >
        </div>
        <el-upload
          v-if="item.type == 'studentMaterial'"
          ref="uploadRefs"
          class="avatar-uploader"
          action="http://127.0.0.1:3007/info/uploadStudentInternshipMaterial"
          :show-file-list="true"
          :on-success="handleUploadSuccessstudentMaterial"
          :headers="{ authorization: userStore.token }"
        >
          <el-icon
            class="avatar-uploader-icon"
            style="color: black; width: 100px; height: 100px; border: 2px solid #ccc"
          >
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <div style="width: 100%">
        <el-form-item v-for="(item, index) in props.btnOpt" :key="index">
          <el-button
            style="padding: 0 20px; letter-spacing: 5px"
            :type="item.btnType || 'primary'"
            @click="handleForm(item.prop)"
            plain
            >{{ item.name }}</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.form-wrapper {
  display: flex;
  justify-content: start;
}

:deep() {
  .el-form-item--label-left .el-form-item__label {
    justify-content: flex-end;
  }

  .el-input {
    box-sizing: border-box;
  }
}
</style>
